<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>轮播</title>
		<style type="text/css">
			.lb {
				width: 640px;
				height: 270px;
				margin: 10px auto;
			}
			
			#left-arrow {
				Position: relative;
				display: inline-block;
				top: -180px;
				z-index: 999;
				cursor: pointer;
			}
			
			#right-arrow {
				Position: relative;
				display: inline-block;
				top: -180px;
				right: -540px;
				z-index: 999;
				cursor: pointer;
			}
			
			#num-btm span {
				display: inline-block;
				font-size: 20px;
				width: 23.2px;
				font-family: arial;
				text-align: center;
				border: 1px solid#fff;
				border-radius: 50%;
				color: #fff;
				cursor: pointer;
				margin-left: 5px;
			}
			
			#num-btm {
				position: relative;
				top: -100px;
				left: 60%;
			}
		</style>
	</head>

	<body>
		<div class="lb">
			<img src="img/1.jpg" id="img" />
			<img src="img/btn_l.png" id="left-arrow" />
			<img src="img/btn_r.png" id="right-arrow" />
			<div id="num-btm"><span style="background: #f00;">1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span></div>
		<!--单元格要排成一排，注意空格也是一个元素-->
		</div>
			<!--
            	作者：offline
            	时间：2017-08-02
            	描述：<input type="button" value="下一张" id="btn" />;
            -->
			<script type="text/javascript">
				var left = document.getElementById("left-arrow");
				var right = document.getElementById("right-arrow");
				var img = document.getElementById("img");
				var index = 1;
				var btns = document.getElementById("num-btm").childNodes;
				for (var i = 0; i < btns.length; i++) {
					btns[i].onclick = (function() {
						var j = i + 1;
						return function() {
							index = j;
							img.src = "img/" + index + ".jpg";
							changbg();
						}/*闭包*/
					})();
				}

				function changbg() {
					for (var i = 0; i < btns.length; i++) {
						btns[i].style.background = "#000";
					}
					btns[index - 1].style.background = "#f00";
				}/*红色标识要跟着动*/
				var moveLeft = function() {
					index++;
					if (index > 6) index = 1;
					img.src = "img/" + index + ".jpg";
					changbg();
				}/*切换上一张*/
				right.onclick = moveLeft;
				left.onclick = function() {
					index--;
					if (index < 1) index = 6;
					img.src = "img/" + index + ".jpg";
					changbg();
				}/*切换下一张*/
				var timer = setInterval(moveLeft, 2000);/*设置自动换图时间*/
				var lb = document.getElementsByClassName("lb")[0];
				lb.onmouseover = function() {
					clearInterval(timer);
				};
				lb.onmouseout = function() {
					timer = setInterval(moveLeft, 2000);
				}
			</script>

	</body>

</html>